<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1、后代选择器*/
        .box .pp span{
            color: #eaea14;
        }
        /*2、子元素（子代）选择器*/
        .box > span {
            color: chartreuse;
        }
        /*3、交集选择器*/
        .box2 {
            color: #0a9595;
            font-size: 50px;
        }
        div.box2{
            background-color: bisque;
        }
        h2.box2 {
            background-color: aquamarine;
        }
        /* 并集选择器 */
        .box3, h2, #lai{
            color: blueviolet;
            font-size: 50px;
        }
        /* 相邻选择器*/
        div + p{
            color: #0a9595;
            font-size: 50px;
        }
        p + p {
            color: #eaea14;
            font-size: 30px;
        }
        .lj1 {
            color: aquamarine;
            text-decoration: none;/*去下划线*/
        }
        /*鼠标经过*/
        .lj1:hover {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <!-- 后代和子元素 -->
    <!-- <div class="box">
        <p class="pp">
            <span>文字</span>
        </p>
        <span>哈哈哈哈</span>
    </div>
    <span>猫猫</span> -->

    <!-- 交集选择器 -->
    <!-- <div class="box2">老鼠</div>
    <div>上台灯</div>
    <h2 class="box2">偷油吃</h2>
    <p>下不来</p> -->

    <!-- 并集选择器 -->
     <!-- <div class="box3">猴子称大王</div>
     <h2>无法无天</h2>
     <p id="lai">如来神掌</p> -->

    <!-- 相邻选择器 -->
     <!-- <div>12345</div>
     <p>老虎</p>
     <p>老虎没打着</p>
     <h3>松鼠</h3>
     <span>哦哦</span> -->

    <!-- 链接伪类选择器 -->
     <a href="#" class="lj1">链接文字</a>
</body>
</html>